body{
	background: url(../img/0.jpg) no-repeat;
	background-size: 100% 800px;
}
h1{
	font-size: 100px;
	font-family: "华文彩云";
	font-weight: 900;
	text-shadow: 5px 5px 10px #ff0000;
	opacity: .8;
}

#d1 {
	background: url(../img/1.png) no-repeat;
	width: 120px;
	height: 202px;
	background-size: 100% 100%;
	position: relative;
    top: 355px;
    left: 74px;
    animation: d1 8s linear;
	animation-iteration-count: 1;
}

#d2 {
	background: url(../img/2.png) no-repeat;
	width: 120px;
	height: 202px;
	background-size: 100% 100%;
	position: relative;
    top: 284px;
    left: 163px;
    animation: d2 8s linear 12s;
}

#d3 {
	background: url(../img/3.png) no-repeat;
	width: 120px;
	height: 202px;
	background-size: 100% 100%;
	position: relative;
    top: 108px;
    left: 453px;
    animation: d3 8s linear 20s;
}

#d4 {
	background: url(../img/4.png) no-repeat;
	width: 120px;
	height: 202px;
	background-size: 100% 100%;
	position: relative;
    top: -110px;
    left: 1058px;
    animation: d4 8s linear 28s;
}

#d5 {
	background: url(../img/5.png) no-repeat;
	width: 120px;
	height: 202px;
	background-size: 100% 100%;
	position: relative;
    top: -459px;
    left: 1283px;
    animation: d5 8s linear 36s;
}

@keyframes d1{
	0%{
		background: url(../img/1.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(1) ;
		opacity: 1;
	}
	25%{
		background: url(../img/1.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(4);
		opacity: 1;
	}
	50%{
		background: url(../img/1.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(3);
		opacity: 1;
	}
	75%{
		background: url(../img/1.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(2);
		opacity: 1;
	}
	100%{
		background: url(../img/1.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 0;
	}
}
@keyframes d2{
	0%{
		background: url(../img/2.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 1;
	}
	25%{
		background: url(../img/2.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(4);
		opacity: 1;
	}
	50%{
		background: url(../img/2.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(3);
		opacity: 1;
	}
	75%{
		background: url(../img/2.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(2);
		opacity: 1;
	}
	100%{
		background: url(../img/2.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 0;
	}
}
@keyframes d3{
	0%{
		background: url(../img/3.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 1;
	}
	25%{
		background: url(../img/3.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(4);
		opacity: 1;
	}
	50%{
		background: url(../img/3.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(3);
		opacity: 1;
	}
	75%{
		background: url(../img/3.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(2);
		opacity: 1;
	}
	100%{
		background: url(../img/3.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 0;
	}
}
@keyframes d4{
	0%{
		background: url(../img/4.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 1;
	}
	25%{
		background: url(../img/4.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(4);
		opacity: 1;
	}
	50%{
		background: url(../img/4.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(3);
		opacity: 1;
	}
	75%{
		background: url(../img/4.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(2);
		opacity: 1;
	}
	100%{
		background: url(../img/4.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 0;
	}
}
@keyframes d5{
	0%{
		background: url(../img/5.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 1;
	}
	25%{
		background: url(../img/5.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(4);
		opacity: 1;
	}
	50%{
		background: url(../img/5.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(3);
		opacity: 1;
	}
	75%{
		background: url(../img/5.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(2);
		opacity: 1;
	}
	100%{
		background: url(../img/5.png) no-repeat;
		background-size: 100% 100%;
		transform: scale(1);
		opacity: 0;
	}
}

#球1 {
	width: 30px;
	height: 30px;
	background-color: #FF8C00;
	border-radius: 50%;
	position: relative;
    animation: 球1 5s 6s;
	top: -647px;
	left: 118px;
}

#球2 {
	width: 30px;
	height: 30px;
	background-color: #FF8C00;
	border-radius: 50%;
	position: relative;
    animation: 球2 5s 15s ;
	top: -560px;
	left: 208px;
}

#球3 {
	width: 30px;
	height: 30px;
	background-color: #FF8C00;
	border-radius: 50%;
	position: relative;
    animation: 球3 5s 23s ;
	top: -564px;
	left: 496px;
}

#球4 {
	width: 30px;
	height: 30px;
	background-color: #FF8C00;
	border-radius: 50%;
	position: relative;
    animation: 球4 5s 30s ;
	top: -595px;
	left: 1099px;
}

#球5 {
	width: 30px;
	height: 30px;
	background-color: #FF8C00;
	border-radius: 50%;
	position: relative;
    animation: 球5 5s 41s;
	top: -774px;
	left: 1325px;
}

@keyframes 球1 {
    0% {
        transform: translate(116px, -39px);
    }
    20% {
        transform: translate(200px, -60px);
    }
	50% {
	    transform: translate(263px, -90px);
	}
	80% {
	    transform: translate(500px, -78px);
	}
    100% {
        transform: translate(664px, -54px);
    }
}

@keyframes 球2 {
    0% {
        transform: translate(48px, -5px);
    }
    20% {
        transform: translate(150px, -129px);
    }
    50% {
        transform: translate(245px, -186px);
    }
    80% {
        transform: translate(444px, -201px);
    }
    100% {
        transform: translate(613px, -192px);
    }
}

@keyframes 球3 {
    0% {
        transform: translate(41px, -6px);
    }
    20% {
        transform: translate(70px, -70px);
    }
    50% {
        transform: translate(151px, -131px);
    }
    80% {
        transform: translate(204px, -204px);
    }
    100% {
        transform: translate(287px, -203px);
    }
}

@keyframes 球4 {
    0% {
        transform: translate(43px, 8ppx);
    }
    20% {
        transform: translate(3px, -60px);
    }
    50% {
        transform: translate(-136px, -137px);
    }
    80% {
        transform: translate(-287px, -178px);
    }
    100% {
        transform: translate(-469px, -181px);
    }
}

@keyframes 球5 {
    0% {
        transform: translate(42px, 6px);
    }
    20% {
        transform: translate(-13px, -34px);
    }
    50% {
        transform: translate(-154px, -60px);
    }
    80% {
        transform: translate(-332px, -90px);
    }
    100% {
        transform: translate(-594px, -82px);
    }
}
    